@import './vars.scss';
@import './comm.scss';
/*******width**********/
@mixin w($w) {
  .w#{$w} {
    width: $w + px;
  }
}
/*******padding**********/
@mixin pl($num) {
  .pl#{$num} {
    padding-left: $num + px;
  }
}
@mixin pr($num) {
  .pr#{$num} {
    padding-right: $num + px;
  }
}
@mixin pt($num) {
  .pt#{$num} {
    padding-top: $num + px;
  }
}
@mixin pb($num) {
  .pb#{$num} {
    padding-bottom: $num + px;
  }
}
/*******margin**********/
@mixin ml($num) {
  .ml#{$num} {
    margin-left: $num + px;
  }
}
@mixin mr($num) {
  .mr#{$num} {
    margin-right: $num + px;
  }
}
@mixin mt($num) {
  .mt#{$num} {
    margin-top: $num + px;
  }
}
@mixin mb($num) {
  .mb#{$num} {
    margin-bottom: $num + px;
  }
}
/*******font-size**********/
@mixin f($num) {
  .f#{$num} {
    font-size: $num + px;
  }
}
@for $num from 2 to 100 {
  @if ($num%2 ==0) {
    @include w($num);
    @include pl($num);
    @include pr($num);
    @include pt($num);
    @include pb($num);
    @include ml($num);
    @include mr($num);
    @include mt($num);
    @include mb($num);
    @include f($num);
  }
}
/*******background-color**********/
@mixin c_bg($class, $num) {
  .c#{$class} {
    color: $num;
  }
  .bg#{$class} {
    background-color: $num;
  }
}
@include w(100);
@include w(120);
@include w(140);
@include w(150);
@include w(160);
@include w(126);
@include w(200);
@include w(220);
@include w(310);
@include w(330);
@include w(370);
@include w(418);
@include w(520);
@include w(600);
@include w(1000);
@include w(1200);
@include mt(230);
@include mt(250);
@include ml(240);
@include ml(280);
@include ml(336);
@include f(13);
@include c_bg(1, $c1);
@include c_bg(2, $c2);
@include c_bg(3, $c3);
@include c_bg(4, $c4);
@include c_bg(5, $c5);
@include c_bg(6, $c6);
@include c_bg(7, $c7);
@include c_bg(8, $c8);
@include c_bg(9, $c9);
@include c_bg(10, $c10);
@include c_bg(11, $c11);
@include c_bg(12, $c12);
@include c_bg(13, $c13);
@include c_bg(14, $c14);
@include c_bg(15, $c15);
@include c_bg(16, $c16);
@include c_bg(17, $c17);
